<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import type { LandingType } from './index.ts'
import { GetDataDetail, PostAddLandingpage, PutLandingpage } from '@/api/modules/videoManagement.ts'
import detailStore from '@/store/modules/cacheData'

const route = useRoute()
const router = useRouter()
const detailData = detailStore()

// 获取传入ID
const id = route.query.id as string
const ruleFormRef = ref<FormInstance>()
const ruleForm: any = ref({
  landingName: '', // 标题
  landingType: 0, // 活动类型
  landingLine: 0, // 优先
  customerServiceSwitch: true, // 是否显示
  customerServicePic: '', // 客服图标
  customerServiceLink: '', // 跳转连接
  buyNocouponPic: '', // 未领券购买按钮图片
  buyCouponPic: '', // 券后购买按钮图片
  buyNovipPic: '', // 非会员购买图片
  buyVipPic: '', // 会员购买图片
  landingBg: [], // 背景图，多张用,分割
  outProductId: 0, // 关联商品ID
  outCouponId: 0, // 关联券ID
  payBeforePic: '', // 支付之前提示图片
  payBeforeSwitch: true, // 支付之前是否提示
  payAfterPic: '', // 支付之后提示图片
  payAfterSwitch: true, // 支付之后是否提示
  scrollingSwitch: 1, // 弹幕开关
  payLayerSwitch: 0,
  payLayerPic: [],
  landingStatus: false,
  landingId: 0,
})

// 验证规则
const rules = reactive({
  landingName: [
    { required: true, message: '请输入标题', trigger: 'blur' },
  ],
  landingType: [
    { required: true, message: '请选择活动类型', trigger: 'blur' },
  ],
  landingLine: [
    { required: true, message: '请选择', trigger: 'blur' },
  ],
  buyNocouponPic: [
    { required: true, message: '请上传图片', trigger: 'blur' },
  ],
  buyCouponPic: [
    { required: true, message: '请上传图片', trigger: 'blur' },
  ],
  buyNovipPic: [
    { required: true, message: '请上传图片', trigger: 'blur' },
  ],
  buyVipPic: [
    { required: true, message: '请上传图片', trigger: 'blur' },
  ],
})

// 图片上传赋值
function handleUploadSuccess(key: keyof LandingType, url: string) {
  if (url && typeof url === 'string') {
    ruleForm.value[key] = url
  }
}

// 提交
async function SubmitData(formEl: FormInstance | undefined) {
  if (!formEl) {
    return
  }
  await formEl.validate((valid) => {
    if (valid) {
      if (id) {
        PutLandingpage(ruleForm.value).then((res: any) => {
          if (res.statusCode === 200) {
            ElMessage.success('修改成功')
            router.push({
              name: 'videoManagementIndex',
            })
          }
          else {
            ElMessage.error(`修改失败。${res.errors}`)
          }
        })
      }
      else {
        PostAddLandingpage(ruleForm.value).then((res: any) => {
          if (res.statusCode === 200) {
            ElMessage.success('添加成功')
            detailData.EmptyVideo()
            router.push({
              name: 'videoManagementIndex',
            })
          }
          else {
            ElMessage.error(`添加失败。${res.errors}`)
          }
        })
      }
    }
    else {
      // console.log('error submit!', fields)
      ElMessage.error('请检查表单')
    }
  })
}

watch(ruleForm, (newValue) => {
  detailData.RememberVideo(newValue)
}, { deep: true })

onMounted(async () => {
  if (id) {
    await GetDataDetail(id).then((res: any) => {
      if (res.statusCode === 200) {
        ruleForm.value = res.data
        // ruleForm.value.landingBg = res.data.landingBg.split(',')
      }
    })
  }
  else {
    ruleForm.value = detailData.GetVideoData()
  }
})
</script>

<template>
  <div>
    <PageHeader :title="id ? '编辑' : '添加'" />
    <ElForm ref="ruleFormRef" label-position="top" label-width="80px" :rules="rules" :model="ruleForm">
      <PageMain title="基础信息">
        <ElRow :gutter="20">
          <ElCol :md="8">
            <ElFormItem label="标题" prop="landingName">
              <el-input v-model="ruleForm.landingName" style="width: 300px;" placeholder="请输入落地页标题" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="活动类型" prop="landingType">
              <el-radio-group v-model="ruleForm.landingType">
                <el-radio :value="1">
                  领券
                </el-radio>
                <el-radio :value="2">
                  会员
                </el-radio>
                <el-radio :value="3">
                  直接购买
                </el-radio>
              </el-radio-group>
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="优先" prop="landingLine">
              <el-radio-group v-model="ruleForm.landingLine">
                <el-radio :value="1">
                  购买优先
                </el-radio>
                <el-radio :value="2">
                  领券、会员优先
                </el-radio>
              </el-radio-group>
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="关联商品ID" prop="outProductId">
              <el-input v-model="ruleForm.outProductId" style="width: 220px;" placeholder="商品ID" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="关联发券ID" prop="outCouponId">
              <el-input v-model="ruleForm.outCouponId" style="width: 220px;" placeholder="商品ID" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="弹幕开关" prop="scrollingSwitch">
              <ElRadioGroup v-model="ruleForm.scrollingSwitch">
                <ElRadioButton :value="1">
                  开启
                </ElRadioButton>
                <ElRadioButton :value="0">
                  关闭
                </ElRadioButton>
              </ElRadioGroup>
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="客服图标" prop="customerServicePic">
              <ImageUpload action="action" :size="1" :url="ruleForm.customerServicePic" @on-success="(imgUrl: string) => handleUploadSuccess('customerServicePic', imgUrl)" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="客服图标是否显示" prop="customerServiceSwitch">
              <ElRadioGroup v-model="ruleForm.customerServiceSwitch">
                <ElRadioButton :value="true">
                  是
                </ElRadioButton>
                <ElRadioButton :value="false">
                  否
                </ElRadioButton>
              </ElRadioGroup>
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="客服图标跳转连接" prop="customerServiceLink">
              <el-input v-model="ruleForm.customerServiceLink" style="width: 400px;" placeholder="请输入链接" />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
      <PageMain title="图片">
        <ElRow :gutter="20">
          <ElCol :md="12">
            <ElFormItem label="未领券购买按钮图片" prop="buyNocouponPic">
              <ImageUpload :size="0.5" width="auto" :height="100" :url="ruleForm.buyNocouponPic" @on-success="(imgUrl: string) => handleUploadSuccess('buyNocouponPic', imgUrl)" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="12">
            <ElFormItem label="领券后购买按钮图片" prop="buyCouponPic">
              <ImageUpload :size="0.5" width="auto" :height="100" :url="ruleForm.buyCouponPic" @on-success="(imgUrl: string) => handleUploadSuccess('buyCouponPic', imgUrl)" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="12">
            <ElFormItem label="非会员购买按钮图片" prop="buyNovipPic">
              <ImageUpload :size="0.5" width="auto" :height="100" :url="ruleForm.buyNovipPic" @on-success="(imgUrl: string) => handleUploadSuccess('buyNovipPic', imgUrl)" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="12">
            <ElFormItem label="会员购买按钮图片" prop="buyVipPic">
              <ImageUpload :size="0.5" width="auto" :height="100" :url="ruleForm.buyVipPic" @on-success="(imgUrl: string) => handleUploadSuccess('buyVipPic', imgUrl)" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="12">
            <ElFormItem label="支付前弹层是否显示" prop="payBeforeSwitch">
              <ElRadioGroup v-model="ruleForm.payBeforeSwitch">
                <ElRadioButton :value="true">
                  开启
                </ElRadioButton>
                <ElRadioButton :value="false">
                  关闭
                </ElRadioButton>
              </ElRadioGroup>
            </ElFormItem>
          </ElCol>
          <ElCol :md="12">
            <ElFormItem label="支付后弹层是否显示" prop="payAfterSwitch">
              <ElRadioGroup v-model="ruleForm.payAfterSwitch">
                <ElRadioButton :value="true">
                  开启
                </ElRadioButton>
                <ElRadioButton :value="false">
                  关闭
                </ElRadioButton>
              </ElRadioGroup>
            </ElFormItem>
          </ElCol>
          <ElCol :md="12">
            <ElFormItem label="支付前弹层" prop="payBeforePic">
              <ImageUpload :size="0.5" height="auto" :width="200" :url="ruleForm.payBeforePic" @on-success="(imgUrl: string) => handleUploadSuccess('payBeforePic', imgUrl)" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="12">
            <ElFormItem label="支付后弹层" prop="payAfterPic">
              <ImageUpload :size="0.5" height="auto" :width="200" :url="ruleForm.payAfterPic" @on-success="(imgUrl: string) => handleUploadSuccess('payAfterPic', imgUrl)" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="24">
            <ElFormItem label="支付弹层" prop="payLayerSwitch">
              <ElRadioGroup v-model="ruleForm.payLayerSwitch">
                <ElRadioButton :value="0">
                  不弹
                </ElRadioButton>
                <ElRadioButton :value="1">
                  支付前弹
                </ElRadioButton>
                <ElRadioButton :value="2">
                  支付后弹
                </ElRadioButton>
              </ElRadioGroup>
            </ElFormItem>
          </ElCol>
          <ElCol :md="24">
            <ElFormItem label="支付弹层" prop="payLayerPic">
              <ImagesUpload :size="0.5" :max="4" :url="ruleForm.payLayerPic" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="24">
            <ElFormItem label="背景图" prop="introduceImages">
              <ImagesUpload :size="0.5" :max="20" :url="ruleForm.landingBg" />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
    </ElForm>
    <div style="height: 60px;" />
    <FixedActionBar>
      <ElButton type="primary" size="large" @click="SubmitData(ruleFormRef)">
        提交
      </ElButton>
    </FixedActionBar>
  </div>
</template>

<style scoped>
/* stylelint-disable-next-line no-empty-source */
</style>
